<template>
	<view>
		<view class="page">
			<uni-popup ref="openNick" type="bottom" >
				<view style="color:#fff; padding:20rpx; padding-bottom:100rpx; background-color: #333;">
					<view style="color:#fff; height:60rpx; text-align: center;">编辑名称</view>
					<input style="background-color: #000; padding:20rpx;" :value="info.nick" @input="inputNick" focus placeholder="" />
				</view>
			</uni-popup>
			<uni-popup ref="openShengao" type="bottom" >
				<view style="color:#fff; padding:20rpx; padding-bottom:100rpx; background-color: #333;">
					<view style="color:#fff; height:60rpx; text-align: center;">编辑身高</view>
					<input style="background-color: #000; padding:20rpx;" :value="info.shengao" @input="inputShengao" focus placeholder="" />
				</view>
			</uni-popup>
			<uni-popup ref="openTizhong" type="bottom" >
				<view style="color:#fff; padding:20rpx; padding-bottom:100rpx; background-color: #333;">
					<view style="color:#fff; height:60rpx; text-align: center;">编辑体重</view>
					<input style="background-color: #000; padding:20rpx;" :value="info.tizhong" @input="inputTizhong" focus placeholder="" />
				</view>
			</uni-popup>
			<view class="top" :style="`padding-top:` + $store.state.StatusBar.statusBar + `px`">
				<view class="top-icon" @click="back">
					<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
				</view>
				<view class="top-title c-fff">{{ title }}</view>
				<view style="position:absolute; right:100rpx; transform: translateY(-50rpx); background-color: #43ca00; color:#fff; padding:8rpx; border-radius: 2rpx;"
				@click="submit" >完成</view>
			</view>
			<view class="body" :style="`margin-top:` + $store.state.StatusBar.statusBar + `px`">
				<view class="list">
					<view class="item">
						<view class="label c-fff">头像</view>
						<view @click="openAvatar">
							<span class="right-span">
								<image :src="info.pic" style="width:80rpx; height:80rpx; border-radius: 50%;" class="img" mode="aspectFill"></image>
							</span>
							<view class="top-infr-icon">
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="label c-fff">昵称</view>
						<view @click="openNick">
							<span class="right-span">{{info.nick}}</span>
							<view class="top-infr-icon">
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="item" @tap="to('/pages/m-pages/m-password/index')">
						<view class="label c-fff">性别</view>
						<span class="right-span">{{info.sex == 1 ? '男' : '女'}}</span>
						<view class="top-infr-icon">
							
						</view>
					</view>
					<view class="item">
						<view class="label c-fff">标签</view>
						<view @click="toEditTag" style="display: flex; flex-direction: row;">
							<view style="display: flex; flex-direction: row; flex-wrap: wrap; flex: 1; justify-content: end; margin:0 20rpx;">
								<view class="tag" v-for="(item, index) in tags">{{item}}</view>
							</view>
							<view class="top-infr-icon">
								<image class="img"
									src=""
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
					<view class="item" >
						<view class="label c-fff">生日</view>
						<view>
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<picker mode="date" :value="info.birthday"  @change="changeBirthday">
										<span class="right-span">{{info.birthday}}</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="label c-fff">身高</view>
						<view>
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<picker range-key="value" :range="shengaoList" :value="info.shengao"  @change="changeShengao">
										<span class="right-span" v-if="info.shengao">{{info.shengao}}</span>
										<span class="right-span" v-else>请选择</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="label c-fff">体重</view>
						<view >
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<picker range-key="value" :range="tizhongList" :value="info.tizhong"  @change="changeTizhong">
										<span class="right-span" v-if="info.tizhong">{{info.tizhong}}</span>
										<span class="right-span" v-else>请选择</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
					
					<view class="item">
						<view class="label c-fff">年收入</view>
						<view >
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<picker range-key="value" :range="nianshouruList" :value="info.nianshouru"  @change="changeNianshouru">
										<span class="right-span">{{info.nianshouru}}</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
					
					<view class="item">
						<view class="label c-fff">学历</view>
						<view >
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<picker range-key="value" :range="xueliruList" :value="info.eduStatusRu"  @change="changeXueliru">
										<span class="right-span">{{info.eduStatusRu}}</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
					
					<view class="item">
						<view class="label c-fff">职业</view>
						<view >
							<view class="top-infr-icon">
								<view class="uni-list-cell-db">
									<!-- info.zhiyename -->
									<picker mode="multiSelector" range-key="name" :range="zhiyeList" :value="zhiyeIndex"  @change="changeZhiye" @columnchange="changeZhiyeMultiSelector">
										<span class="right-span">{{info.zhiyename}}</span>
									</picker>
								</view>
								<image class="img"
									src=""
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					
						<!-- @click="openMysign" -->
					<textarea style="background-color: #919191; border-radius: 30rpx; opacity: 0.8; text-align: left; padding:20rpx 40rpx; color:#fff;" placeholder-style="color:#fff" placeholder="这里是个性签名哦" name="" id="" cols="30" rows="5">{{info.mysign}}</textarea>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { to } from '@/utils/index.js';
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'
export default {
	data() {
		return {
			info: {},
			title:'完善资料',
			cacheSize: '',
			zhiyeIndex:[0,0],
			shengaoList:[],
			shengao: false,
			tizhongList:[],
			tizhong: false,
			nianshouruList:[],
			nianshouru: false,
			xueliruList:[],
			xueliru:false,
			zhiyeList:[],
			zhiye:false,
			nick: false,
			avatar: false,
			mysign: false,
			tags: [],
		}
	},
	onLoad(option) {
		this.$c.post('/app/user/getShengao').then(res=>{
			this.shengaoList = res.data
		});
		this.$c.post('/app/user/getTizhong').then(res=>{
			this.tizhongList = res.data
		});
		this.$c.post('/app/user/getNianShouRu').then(res=>{
			this.nianshouruList = res.data
		});
		this.$c.post('/app/user/getXueLiRu').then(res=>{
			this.xueliruList = res.data
		});
		this.$c.post('/app/user/getZhiYe').then(res=>{
			this.zhiyeList.push(res.data)
			for(let item of res.data){
				if(this.zhiyeList.length < 2){
					this.zhiyeList.push(item.zhiyeList);
				}
			}
			console.log(this.zhiyeList)
		});
		// this.$c.post('/app/geren/sslist').then(res=>{
		// 	this.shengaoList = res.data
		// });
	},
	onLoad(option) {
		this.getInfo();
	},
	methods: {
		to,
		changeZhiyeMultiSelector(e){
			console.log('修改的列为：' + e.detail.column + '，当前行为：' + e.detail.value);
			if(e.detail.column == 0){
				// this.zhiyeIndex[1] = 0;
				this.zhiyeList[0].forEach((item, index) => {
					// console.log('item',item)
					if (index == e.detail.value) {
						// item.children.forEach((item2, index2) => {
						// 	column2.push(item2.cjname);
						// 	if (index2 == this.multiIndex[1]) {
						// 		this.sendDate.sysid = item2.sysid;
						// 		// console.log('获取的数据',item2)
						// 	}
						// 	//拖动第一列后第二列对应的数据行数小于拖动前第二列的当前行
						// 	if (this.multiIndex[1] > item.children.length-1) {
						// 		this.sendDate.sysid = item.children[0].sysid;
						// 		//第二列的行回到第一行
						// 		this.multiIndex.splice(1, 1, 0);
								
						// 	}
						// });
						this.zhiyeList[1] = item.zhiyeList
					}
				});
			}
			// this.zhiyeIndex[e.detail.column] = e.detail.value;
			// console.log('this.multiIndex[0]',this.multiIndex[0]); //第一列的当前行
			// console.log('this.multiIndex[1]',this.multiIndex[1]); //第二列的当前行
		 
			// this.multiArray[1] = column2;
			this.$forceUpdate();  // 重新渲染
		},
		back() {
			to()
		},
		openNick() {
			this.$refs.openNick.open()
		},
		inputNick(val){
			this.info.nick = val.detail.value
			this.nick = true;
		},
		inputShengao(val){
			this.info.shengao = val.detail.value
			this.shengao = true;
		},
		inputTizhong(val){
			this.info.tizhong = val.detail.value
			this.tizhong = true;
		},
		openTizhong() {
			this.$refs.openTizhong.open()
		},
		openShengao() {
			// this.$refs.openShengao.open()
		},
		openAvatar() {
			const carmeraAvatar = uni.getStorageSync('carmeraAvatar');
			if (carmeraAvatar) {
				this.chooseImage();
				return
			}
			uni.showModal({
				content: '拍照功能用于上传头像',
				success: res => {
					if (res.confirm) {
						uni.setStorageSync('carmeraAvatar', true);
						this.chooseImage();
					}
				}
			})
		},
		chooseImage(){
			uni.chooseImage({
				count: 1,
				success: async (file) => {
					const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'image/')
				  if(success) {
					  console.log(data)
					  this.requestAvatar(data);
				  } else {
					uni.showToast({icon:'none', title: data})
				  }
				}
			})
		},
		
		async requestAvatar(avatar){
			let params = {pic: avatar};
			let header = {'content-type': 'application/x-www-form-urlencoded'}
			let res = await this.$c.post("/app/geren/uppic?", params, header);
			console.log("头像是否修改成功："+ JSON.stringify(res));
			if(0 == res.code){
				this.info.pic = avatar;
				this.avatar = true;
				console.log("头像："+ this.info.pic)
			}
		},
		
		changeBirthday(val){
			this.info.birthday = val.detail.value
			this.birthday = true;
		},
		changeShengao(val){
			this.info.shengao = this.shengaoList[val.detail.value].value
			this.shengao = this.shengaoList[val.detail.value].id;
		},
		changeTizhong(val){
			this.info.tizhong = this.tizhongList[val.detail.value].value
			this.tizhong = this.tizhongList[val.detail.value].id;
			this.$set("info.tizhong",this.info.tizhong)
			console.log(this.tizhongList[val.detail.value],this.info)
		},
		changeNianshouru(val){
			this.info.nianshouru = this.nianshouruList[val.detail.value].value
			this.nianshouru = this.nianshouruList[val.detail.value].id;
		},
		changeXueliru(val){
			this.info.eduStatusRu = this.xueliruList[val.detail.value].value
			this.xueliru = this.xueliruList[val.detail.value].id;
		},
		changeZhiye(val){
			// console.log(this.zhiyeList[0][val.detail.value[0]],this.zhiyeList[1][val.detail.value[1]])
			this.info.zhiyename = this.zhiyeList[1][val.detail.value[1]].name
			this.zhiye = this.zhiyeList[1][val.detail.value[1]].code;
		},
		quit() {
			uni.$TUIKit.logout().then(() => {
				uni.clearStorage();
				uni.showToast({
					title: '退出成功',
					icon: 'none',
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/im/login/login',
					});
				}, 1000);
			}).catch((err) => {
				uni.showToast({
					title: '退出成功',
					icon: 'none',
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/im/login/login',
					});
				}, 1000);
			});
		},
		async getInfo() {
			let res = await this.$c.post("/app/usermessage/getMessage")
			if(res.code != 0){
				uni.navigateTo({
				  url: '/im/login/login'
				});
			}
			this.info = res.data
			if(!this.info.birthday){
				this.info.birthday = "请选择生日"
			}
			if(res.data.biaoqianname){
				this.tags = res.data.biaoqianname.split(',');
			}
		},
		async submit() {
			if(this.avatar){
				let res = await this.$c.post("/app/geren/uppic?pic=" + this.info.pic)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.birthday){
				let res = await this.$c.post("/app/geren/upbirthday?birthday=" + this.info.birthday)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.shengao){
				let res = await this.$c.post("/app/geren/upshengao?shengao=" + this.shengao)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.tizhong){
				let res = await this.$c.post("/app/geren/uptizhong?tizhong=" + this.tizhong)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.nianshouru){
				let res = await this.$c.post("/app/geren/upnianshouru?nianshouru=" + this.nianshouru)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.xueliru){
				let res = await this.$c.post("/app/geren/upxueli?xueliru=" + this.xueliru)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.zhiye){
				let res = await this.$c.post("/app/geren/upzhiye?zhiyecode=" + this.zhiye)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.nick){
				let res = await this.$c.post("/app/geren/upnick?nick=" + this.info.nick)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			if(this.mysign){
				let res = await this.$c.post("/app/geren/upmysign?mysign=" + this.info.mysign)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
			}
			uni.showToast({
				title: "提交成功",
				icon: "none"
			})
			// setTimeout(() => {
				// this.getInfo()
				// this.$router.go(0)
			// }, 1000)
		},
		toEditTag() {
			uni.navigateTo({
				url:'/pages/m-pages/m-user-tag/m-user-tag',
				events: {
					sendTags: res => {
						if (res.names) {
							console.log("res: " + JSON.stringify(res));
							this.tags = res.names.split(',');
						}
					}
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.page {
	width: 100vw;
	padding: 30rpx;
	height: 100vh;
	/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
}

.right-span{
	color: #aaffff; position:absolute; right:40rpx; width:280rpx; text-align: right;
}
.top {
	position: fixed;
	top: 0rpx;
	width: 100%;
	/* background-color: #e3ecfb; */
	z-index: 999;
	text-align: center;
	vertical-align: middle;
	padding: 10rpx;
}

.top-icon {
	position: absolute;
	left: 30rpx;
	z-index: 99;
	width: 30rpx;
	height: 30rpx;
}

.top-title {
	color:#fff;
	line-height: 50rpx;
	display: block;
	height: 50rpx;
	z-index: 99;
}

.body {
	padding-top: 20rpx;
	text-align: center;

	.title {
		margin-top: 40rpx;
		font-size: 24rpx;
	}

	.top-infr-icon {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 0rpx;
	}

	.button {
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
		color: #fff;
		display: inline-block;
		padding: 30rpx 0rpx;
		transform: translateX(-30rpx);
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 80%;
		margin-top: 30rpx;
	}

	.mark {
		width: 100%;
		margin-top: 30rpx;
		text-align: left;
		font-size: 20rpx;
		color: #9d9395;
	}

	.list {
		margin-top: 60rpx;

		.item {
			width: 90vw;
			min-height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx;
			transform: translateX(-30rpx);
			position: relative;

			.label {
				position: absolute;
				left: 40rpx;
			}

			border-bottom: 1px solid #3f3f3f;
		}
	}
	
	.tag {
		margin: 5rpx;
		padding: 10rpx 20rpx;
		height: 35rpx;
		line-height: 35rpx;
		background-color: #009fff;
		border-radius: 50rpx;
		color: #fff;
		font-size: 24rpx;
	}
}</style>